<template>
	<view class="slideshow" :class="slideshowStyle == 0 ? 'style-0':'style-1'">
		<swiper class="swiper" :style="{height:swiperHeight+'px'}" @change="changeFollowSwiper" 
		:current="swiperCurrentIndex" 
		:indicator-dots="indicatorDots" 
		indicator-color="rgba(255,255,255,.5)" 
		indicator-active-color="#ffffff" 
		:autoplay="autoplay" 
		:interval="interval" 
		:circular="circular" 
		>
			<swiper-item v-for="(item,index) in params" :key="index">
				<view class="swiper-item" @click="item.link.type == 'tominiprogram'? $refs.toMP.toMiniprogram(item.link):util.goToLink(item.link)">
					<image mode="widthFix" :src="item.img_url" class="image"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 跳转小程序码 -->
		<toMiniprogram ref="toMP" />
	</view>
</template>

<script>
	import toMiniprogram from '@/common/components/tominiprogram.vue'
	export default {
		name: 'SlideShow',
		props: {
			title: {
				type: String,
				default: '轮播组件'
			},
			type: {
				type: String,
				default: 'SlideShow',
			},
			slideshowStyle: {
				type: Number,
				default: 0,
			},
			params: {
				type: Array,
				default: [],
			}
		},
		components: {
			toMiniprogram
		},
		data() {
			return {
				swiperHeight: 166,
				swiperCurrentIndex: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				circular:true,//是否采用衔接滑动，即播放到末尾后重新回到开头
				qrcodeUrl: '',
				currentParams: {}
			}
		},

		created() {
			this.currentParams = this.params
		},
		watch: {
			currentParams: function(){
				var that = this
				that.$nextTick(() => {
					that.getCurrentSwiperHeight('.swiper-item')
				})
			}
		},
		methods: {
			getCurrentSwiperHeight(element) {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					this.swiperHeight = res[0][this.swiperCurrentIndex].height;
					if(this.swiperHeight == 0) this.swiperHeight = 166
					//console.log(this.swiperHeight)
				})
			},
			// 切换swiper
			changeFollowSwiper(e) {
				let {current, source} = e.detail
				//只有页面自动切换，手动切换时才轮播，其他不允许
				if(source === 'autoplay' || source === 'touch'){
					 this.swiperCurrentIndex = current;
				}
				//this.swiperCurrentIndex = e.detail.current;
				this.$nextTick(() => {
					this.getCurrentSwiperHeight('.swiper-item');
			   });
			},

		}
	}
</script>

<style lang="scss">
	.slideshow {
		margin: 10rpx 0;
		.image {
			width: 100%;
			height: auto;
			display: block;
			will-change: transform;
		}
		&:first-child {
			margin: 0;
		}
	}
	.slideshow.style-0 {
		
	}
	.slideshow.style-1 {
		position: relative;
		margin: 10rpx 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		z-index: 2;
		.image {
			height: auto;
		}
	}
	
	.uni-swipe {
		.uni-swiper-dot-active {
			background-color: #fff;
			width: 22rpx;
		}
	}
	
</style>
